import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Home from './pages/home/index'
import Kind from './pages/kind/index'
import Cart from './pages/cart/index'
import User from './pages/user/index'
import { inject, observer } from 'mobx-react';



interface IndexProps {
  store:any
}

const Tabs = createBottomTabNavigator()
const Index = (props: IndexProps) => {
  return (
    <View style={styles.container}>
      <Tabs.Navigator screenOptions={{
        headerShown: false,
        tabBarActiveTintColor:"#f66",
        tabBarInactiveTintColor:"#333",
      }} initialRouteName='/home' >
        <Tabs.Screen name="/home" component={ Home } options={{
          title:"首页",
          tabBarIcon: ({focused}) => {
            return <Image style={ styles.Icon }  source = { focused ? require('./assets/tabBar/home_active.png') : require('./assets/tabBar/home.png')}/>
          }
        }}/>
        <Tabs.Screen name="/kind" component={ Kind } options={{
          title:"分类",
          tabBarIcon: ({focused}) => {
            return <Image style={ styles.Icon }  source = { focused ? require('./assets/tabBar/kind_active.png') : require('./assets/tabBar/kind.png')}/>
          }
        }}/>
        {
          props.store.app.isEnable ? <Tabs.Screen name="/cart" component={ Cart } options={{
            title:"购物车",
            tabBarIcon: ({focused}) => {
              return <Image style={ styles.Icon }  source = { focused ? require('./assets/tabBar/kind_active.png') : require('./assets/tabBar/kind.png')}/>
            }
          }}/> : null
        }
        
        <Tabs.Screen name="/user" component={ User } options={{
          title:"我的",
          tabBarIcon: ({focused}) => {
            return <Image style={ styles.Icon }  source = { focused ? require('./assets/tabBar/user_active.png') : require('./assets/tabBar/user.png')}/>
          }
        }}/>
      </Tabs.Navigator>
    </View>
  );
};

export default inject('store')(observer(Index));

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  Icon:{
    width: 20,
    height:20
  }
});
